<template>
	<view class="account">
		<view class="top">
			<view class="circle">
				<uni-icons type="locked" class='icon' color='white' size="80"></uni-icons>
			</view>
			<text>您正在锁定账户	{{account}}</text>
		</view>
		<view class="item">
			<h4>1.什么情况下需要锁定账号？</h4>
			<view style="font-size: 26upx; color: grey; margin: 20upx 0 10upx;">自己或朋友账号被盗、手机丢失、可以锁定账号</view>
			<view style="font-size: 26upx; color: grey;">保护账号的隐私、资金安全</view>
		</view>
		<view class="item">
			<h4>2.锁定后会怎样？</h4>
			<view style="font-size: 26upx; color: grey; margin: 20upx 0 10upx;">锁定后账号会被登出，确认无风险后可再次登录解锁账号</view>
			<view style="font-size: 26upx; color: grey; margin: 10upx 0">锁定期间任何人无法使用该账户</view>
			<view style="font-size: 26upx; color: grey;">账户信息不会被删除，仍然可以接收消息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '账户名'
			};
		}
	}
</script>

<style lang="scss">
	.account{
		width: 100vw;
		height: calc(100vh - 88upx);
		background: rgb(242,243,247);
		overflow: hidden;
		.top{
			width: 100%;
			height: 30vh;
			background: rgb(51,218,180);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			color: white;
			font-weight: bold;
			.circle{
				width: 250upx;
				height: 250upx;
				border-radius: 50%;
				border: 10upx solid white;
				margin: 0 auto;
				position: relative;
				.icon{
					position: absolute;
					top: 13%;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}
		.item{
			width: 100%;
			box-sizing: border-box;
			padding: 40upx;
			border-bottom: 2upx solid rgb(223,223,223);
		}
	}

</style>
